Selecciones y join de datos en D3.js

IIC2026 2020-2

Selecciones en D3.js II

Selecciones y join de datos en D3.js

IIC2026 2020-2

Selecciones



d3.selectAll("rect")
  .attr("y", 50)
  .style("fill", "red")
  .attr("x", (d, i, all) => 100 * i);
          

<svg>
  <rect y="50" style="fill: red" x="0"></rect>
  <rect y="50" style="fill: red" x="100"></rect>
  <rect y="50" style="fill: red" x="200"></rect>
</svg>

Selecciones


selección elemento elemento elemento elemento

Selecciones


selección grupo elemento elemento elemento elemento

Selecciones


d3.selectAll("elemento")


selección grupo elemento elemento elemento elemento

Selecciones


d3.select("elemento")


selección grupo elemento

Selecciones


d3.selectAll("elemento")


selección html elemento elemento elemento elemento

Selecciones


d3.select("elemento")


selección html elemento

Múltiples grupos



            d3.selectAll("ul");

selección html ul ul ul ul

Múltiples grupos



            d3.selectAll("ul")
              .selectAll("li");

selección html ul ul ul ul

Múltiples grupos



            d3.selectAll("ul")
              .selectAll("li");

selección li li li li li li li li li li li li li li li li ul ul ul ul

Múltiples grupos



            d3.selectAll("ul");

selección html ul ul ul ul

Múltiples grupos



            d3.selectAll("ul")
              .select("li");

selección html ul ul ul ul

Múltiples grupos



            d3.selectAll("ul")
              .select("li");

selección html li li li li

Múltiples grupos



            d3.selectAll("ul")
              .select("li");

selección html li li

Múltiples grupos



            const seleccion = d3.selectAll("ul").select("li");
            console.log(seleccion);

Múltiples grupos



            const seleccion = d3.selectAll("ul").selectAll("li");
            console.log(seleccion);

seleccion.append



            d3.selectAll("ul")
              .append("li");

selección html li li li li

Selecciones en D3.js II

Selecciones y join de datos en D3.js

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!